import React, {
    PureComponent
} from 'react';

import {
    View,
    Text,
    Image,
    StyleSheet,
    Dimensions
} from 'react-native';

interface Props {
    data:any
}

import {
    DataItem,
    LocationData
} from './../../../types/types';

import {
    Bar,
    Press,
    FastImage
} from './../../../components';


const {
    width
} = Dimensions.get(`window`);

import {
    Actions
} from 'react-native-router-flux';

import SafeAreaView from 'react-native-safe-area-view';


import * as CONST from '../../../const';

import parseUrl from "../../../utils/parseUrl";

import gold_icon from './../../../images/vip_icon.png';
import verify_icon from './../../../images/verified_samll.png';

import verify_ing_icon from './../../../images/home/me/verify_ing.png';
import add_photo_icon from './../../../images/home/me/add_photo.png';
import setting_icon from './../../../images/home/me/setting_pic.png';
import edit_profile_icon from './../../../images/home/me/edit_profile.png';


class Header extends PureComponent<Props> {
    static defaultProps = {
        data:{}
    }

    get Data() {
        return this.props.data;
    }

    get aboutMe() {
        const {
            aboutme
        } = this.Data;
        return aboutme;
    }

    get age() {
        const {
            age = 18
        } = this.Data;
        return age;
    }

    get photos(): Array<any> {
        const {
            photos = []
        } = this.Data;
        return photos;
    }

    get avatar() {
        const {
            url
        } = this.photos.find((photo: any) => (
            photo.isAvatar
        )) || {} as string;
        return url;
    }

    get nickName() {
        const {
            userName
        } = this.Data;
        return userName;
    }

    get isGuest() {
        const {
            isGuest = true
        } = this.Data;
        return isGuest;
    }

    get gender(): DataItem {
        const {
            gender = {}
        } = this.Data;
        return gender;
    }

    get genderName() {
        const {
            label = ``
        } = this.gender;
        return label;
    }

    get descName() {
        const {
            age,
            location = {}
        } = this.Data;

        const {
            city = {}
        } = location as LocationData | any;

        return [
            age,
            this.genderName,
            city.label
        ].filter(v => !!v).join(`, `)
    }

    get photoVerify() {
        const {
            photoVerify = 0
        } = this.Data;
        return photoVerify === 1;
    }

    private toBasic = (page:number) => {
        Actions.push(`/user/myBasic`,{
            page:page
        })
    }

    private toSetting = () => {
        Actions.push(`/setting`)
    }

    private toVerify = () => {
        Actions.push(`/verify`)
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.top}>
                    <View style={styles.topCover} />
                    <View style={styles.avatarContent}>
                        <FastImage
                            url={parseUrl(this.avatar)}
                            style={styles.avatarStyle}
                        />
                    </View>
                    <SafeAreaView
                        style={styles.settingButton}
                    >
                        <Press
                            source={setting_icon}
                            onPress={this.toSetting}
                        />
                    </SafeAreaView>
                </View>
                <View style={styles.content}>
                    <View style={styles.nameContent}>
                        <Text style={styles.userName}>
                            {this.nickName}
                        </Text>
                        <View style={styles.icons}>
                            {!this.isGuest && (
                                <View style={styles.imageStyle}>
                                    <Image
                                        source={gold_icon}
                                        style={styles.iconStyle}
                                    />
                                </View>
                            )}
                            {this.photoVerify && (
                                <View style={styles.imageStyle}>
                                    <Image
                                        source={verify_icon}
                                        style={styles.iconStyle}
                                    />
                                </View>
                            )}
                        </View>
                    </View>
                    <Text style={styles.descName}>
                        {this.descName}
                    </Text>
                </View>
                <View style={styles.editContent}>
                    <Press
                        value={0}
                        onPress={this.toBasic}
                        source={edit_profile_icon}
                        style={styles.itemIconStyle}
                    />
                    <Press
                        value={1}
                        onPress={this.toBasic}
                        source={add_photo_icon}
                        style={styles.itemIconStyle}
                    />
                    <Press
                        onPress={this.toVerify}
                        source={verify_ing_icon}
                        style={styles.itemIconStyle}
                    />
                </View>
            </View>
        )
    }
}

export default Header;

const styles = StyleSheet.create({
    container:{
        paddingBottom:12
    },
    top: {
        overflow: `hidden`,
        height: 254 * CONST.rem
    },
    topCover: {
        position: `absolute`,
        top: -width * .37,
        left: -width * .5,
        width: 1.6 * width,
        height: width / 1.5,
        backgroundColor: CONST.color,
        transform: [{rotate: `30deg`}]
    },
    avatarContent:{
        left:0,
        right:0,
        bottom:10,
        alignItems:`center`,
        position: `absolute`,
    },
    avatarStyle:{
        width:130,
        height:130,
        borderWidth:6,
        borderRadius:70,
        ...CONST.shadow,
        shadowOpacity: .5,
        borderColor:`#ccc`,
        shadowColor: CONST.color
    },
    nameContent:{
        alignSelf:`center`,
        flexDirection:`row`
    },
    userName:{
        fontSize:24,
        color:`#333`,
        fontWeight:`bold`
    },
    icons:{
        height:28,
        paddingLeft:4,
        alignItems:`center`,
        flexDirection:`row`
    },
    imageStyle:{
        width:28,
        height:26,
        alignItems:`center`,
        justifyContent:`center`
    },
    iconStyle:{
        marginTop:7
    },
    descName:{
        fontSize:16,
        color:`#777`,
        fontWeight:`bold`,
        paddingVertical:10,
        textAlign:`center`
    },
    editContent:{
        alignSelf:`center`,
        paddingTop:18,
        paddingBottom:10,
        alignItems:`center`,
        flexDirection:`row`,
        justifyContent:`center`,
        borderColor:`#dee7f0`,
        borderBottomWidth:1
    },
    itemIconStyle:{
        paddingHorizontal:6
    },
    settingButton:{
        right:16,
        top:0,
        position: `absolute`,
    }
}) as any;